<template>
  <div class="notification-stats">
    <div class="stat-card unread">
      <div class="stat-icon">
        <el-icon><Bell /></el-icon>
      </div>
      <div class="stat-content">
        <div class="stat-value">{{ stats.unread }}</div>
        <div class="stat-label">未读通知</div>
      </div>
      <div class="stat-trend" v-if="stats.unreadTrend !== 0">
        <el-icon :class="{ 'is-increase': stats.unreadTrend > 0 }">
          <ArrowUp v-if="stats.unreadTrend > 0" />
          <ArrowDown v-else />
        </el-icon>
        <span>{{ Math.abs(stats.unreadTrend) }}%</span>
      </div>
    </div>

    <div class="stat-card system">
      <div class="stat-icon">
        <el-icon><Message /></el-icon>
      </div>
      <div class="stat-content">
        <div class="stat-value">{{ stats.system }}</div>
        <div class="stat-label">系统通知</div>
      </div>
      <div class="stat-trend" v-if="stats.systemTrend !== 0">
        <el-icon :class="{ 'is-increase': stats.systemTrend > 0 }">
          <ArrowUp v-if="stats.systemTrend > 0" />
          <ArrowDown v-else />
        </el-icon>
        <span>{{ Math.abs(stats.systemTrend) }}%</span>
      </div>
    </div>

    <div class="stat-card share">
      <div class="stat-icon">
        <el-icon><Share /></el-icon>
      </div>
      <div class="stat-content">
        <div class="stat-value">{{ stats.share }}</div>
        <div class="stat-label">分享通知</div>
      </div>
      <div class="stat-trend" v-if="stats.shareTrend !== 0">
        <el-icon :class="{ 'is-increase': stats.shareTrend > 0 }">
          <ArrowUp v-if="stats.shareTrend > 0" />
          <ArrowDown v-else />
        </el-icon>
        <span>{{ Math.abs(stats.shareTrend) }}%</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { Bell, Message, Share, ArrowUp, ArrowDown } from '@element-plus/icons-vue'

defineProps({
  stats: {
    type: Object,
    required: true,
    default: () => ({
      unread: 0,
      system: 0,
      share: 0,
      unreadTrend: 0,
      systemTrend: 0,
      shareTrend: 0
    })
  }
})
</script>

<style lang="scss" scoped>
.notification-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-large);
  margin-bottom: var(--spacing-large);
}

.stat-card {
  background: var(--el-bg-color);
  border-radius: var(--border-radius-base);
  padding: var(--spacing-large);
  display: flex;
  align-items: center;
  gap: var(--spacing-large);
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  border: 1px solid var(--el-border-color-lighter);

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  &:hover {
    transform: translateY(-2px);
    box-shadow: var(--box-shadow);

    &::before {
      opacity: 1;
    }
  }

  .stat-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--border-radius-base);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
  }

  .stat-content {
    flex: 1;

    .stat-value {
      font-size: 28px;
      font-weight: 600;
      color: var(--el-text-color-primary);
      line-height: 1.2;
    }

    .stat-label {
      font-size: 14px;
      color: var(--el-text-color-secondary);
      margin-top: 4px;
    }
  }

  .stat-trend {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    color: var(--el-color-danger);

    .is-increase {
      color: var(--el-color-success);
    }
  }

  &.unread {
    --gradient-start: #6366f1;
    --gradient-end: #8b5cf6;
  }

  &.system {
    --gradient-start: #10b981;
    --gradient-end: #059669;
  }

  &.share {
    --gradient-start: #f59e0b;
    --gradient-end: #d97706;
  }
}

@media (max-width: 768px) {
  .notification-stats {
    grid-template-columns: 1fr;
  }
}
</style>